<template>
    <draggable tag="div" class="option-list" :list="options" v-bind="data.dragOption">
        <template #item="{ element,index }">
            <div>
                <div class="option-lsit-item">
                    <HolderOutlined class="option-handle" />
                    <a-input v-model:value="element.label" placeholder="label" />
                    <a-input v-model:value="element.value" placeholder="value" />
                    <PlusSquareOutlined v-if="tree" class="add-child-btn" title="新增选项"
                        @click="addChildOption(element)" />
                    <CloseCircleFilled class="delete-btn" title="删除选项" @click="deleteOption(index)" />
                </div>
                <div class="option-list-child-item">
                    <options-item :options="element.children" :tree="tree"></options-item>
                </div>
            </div>
        </template>
    </draggable>
</template>

<script setup>
import { ref, reactive } from 'vue'
import draggable from "vuedraggable";

defineOptions({
    name: 'optionsItem'
})

const props = defineProps({
    options: {
        type: Array,
    },
    tree: {
        type: Boolean,
        default: false
    }
})

const data = reactive({
    dragOption: {
        animation: 180,
        group: { name: 'option-group' },
        handle: '.option-handle'
    }
})


/**
 * @method
 * @param {String} index 需要删除的选项下标 
 * @desc 删除选项
 */
const deleteOption = (index) => {
    props.options.splice(index, 1);
}

/**
 * @method
 * @desc 添加子选项
 */
const addChildOption = (element) => {

    if (element.children == undefined) {
        element.children = [];
    }

    element.children.push({
        label: '',
        value: '',
    })
}

</script>

<style scoped>
</style>